<!-- eslint-disable prettier/prettier -->
<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>
<!-- eslint-disable prettier/prettier -->
<script setup lang="ts">
import {onBeforeMount ,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
onBeforeMount(()=>{
  console.log('组件：注册一个钩子，在组件被挂载之前被调用。');
})
onMounted(()=>{
  console.log('组件：注册一个回调函数，在组件挂载完成后执行。');
})
onBeforeUpdate(()=>{
  console.log('组件：注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。');
})
onUpdated(()=>{
  console.log('组件：注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。');
})
onBeforeUnmount(()=>{
  console.log('组件：注册一个钩子，在组件实例被卸载之前调用');
})
onUnmounted(()=>{
  console.log('组件：注册一个回调函数，在组件实例被卸载之后调用。');
})
</script>
<style scoped></style>
